<template>
  <div class="div">
      <ul class="list">
          <li v-for="(v,i) in arr" :key="i">
              <div class="limg"><img :src="v.img"></div>
              <p>{{v.name}}</p>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[
                {name:"房贷计算",img:"img/b1.jpg"},
                {name:"找经纪人",img:"img/b2.jpg"},
                {name:"地图找房",img:"img/b3.jpg"},
                {name:"找小区",img:"img/b4.jpg"},
                {name:"必看好房",img:"img/b5.jpg"},
                {name:"金融服务",img:"img/b6.jpg"},
                {name:"直播看房",img:"img/b7.jpg"},
                {name:"VR承诺",img:"img/b8.jpg"},
                {name:"维修",img:"img/b9.jpg"},
                {name:"VR看展",img:"img/b10.jpg"},
                {name:"最近开盘",img:"img/b11.jpg"},
                {name:"好赞好房",img:"img/b12.jpg"},
                {name:"找门店",img:"img/b13.jpg"},
                {name:"买卖流程",img:"img/b14.jpg"},
                {name:"买房",img:"img/b15.jpg"},
                {name:"我要出租",img:"img/b16.jpg"},
                {name:"搬家",img:"img/b17.jpg"},
                {name:"家居",img:"img/b18.jpg"},
                {name:"VR看房",img:"img/b19.jpg"}
            ]
        }
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.div{
    width: 94%;
    height: 1.58rem;
    margin: auto;
    overflow-x: auto;
    border-radius: .15rem;
}
.div::-webkit-scrollbar{
  display: none;
}
.list{
    width: 7.7rem;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background: white;

    padding-left: .15rem;
}
.list li{
    width: .74rem;
    height: 50%rem;
}
.list li .limg{
    width: .3rem;
    height: .3rem;
    margin: .16rem auto .05rem;
}
.list li .limg img{
    width: .29rem;
    height: .27rem;
    
}
.list li p{
    text-align: center;
}
</style>